<template>
  <div>
    <div class="list">
      <ul class="nav" role="tablist">
        <li
          @click="add(val.name)"
          v-for="val in list"
          :key="val.id"
          :class="val.tit === 'Help' ? 'sidebar-bottom-nav' : ''"
        >
          <a
            :class="!val.stat ? 'nav-link' : 'nav-link active'"
            @click="dian(val)"
            href="#"
          >
            <i :class="val.class"></i>
            <span>{{ val.tit }}</span>
          </a>
        </li>
      </ul>
    </div>
    <component :is="active"></component>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['active']),
  },
  components: {
    TODO: require('./todo.vue').default,
    Chats: require('./chats.vue').default,
    Callss: require('./Callss.vue').default,
    Contacts: require('./Contacts.vue').default,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: 'Chats',
          tit: 'Chats',
          class: 'iconfont icon-xinxi',
          stat: false,
        },
        {
          id: 2,
          name: 'Callss',
          tit: 'Callss',
          class: 'iconfont icon-dianhua',
          stat: false,
        },
        {
          id: 3,
          name: 'Contacts',
          tit: 'Contacts',
          class: 'iconfont icon-touxiang',
          stat: false,
        },
        {
          id: 4,
          name: 'TODO',
          tit: 'To-Do',
          class: 'iconfont icon-daduishu',
          stat: true,
        },
        {
          id: 5,
          name: 'Help',
          tit: 'Help',
          class: 'iconfont icon-bangzhu',
          stat: false,
        },
      ],
    }
  },
  methods: {
    dian(val) {
      this.list.forEach((a, i, arr) => {
        arr[i].stat = false
      })
      val.stat = !val.stat
    },
    add(name) {
      this.$store.commit('RESET_ACT', name)

      //   console.log(e.target.tagName)
      //   if (e.target.tagName === 'LI') {
      //     if (this.as) {
      //       this.as = false
      //       e.target.className = ''
      //     } else {
      //       this.as = true
      //       e.target.className = 'active'
      //     }
      //   }
    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  border-right: 1px solid #dadce0;
  position: fixed;
  top: 4.5625rem;
  left: 0;
  bottom: 0;
  max-width: 5rem;
  width: 5rem;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  ul.nav {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height: 100%;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    .nav-link {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      color: inherit;
      padding: 0.6rem 0.8rem;
      font-weight: 600;
      font-size: 0.75rem;
      i {
        color: #949aa2;
        margin: 0 1rem;
      }
    }
    .active {
      i {
        color: #ae6eea;
      }
      color: #ae6eea;
    }
    .sidebar-bottom-nav {
      margin-top: auto;
    }
  }
}
</style>
